<template>
<div class="containe">
  <m-header :pubtitle="topic" />
  <div class="ctx-wrap">
    <chartWrap wrapClass="ctx-sound-group" title="声音变化趋势" iconClass="el-icon-s-data">
      <div class="item-title-right" slot="titleRight">
        <el-dropdown @command="handleDropdownClick">
          <span class="el-dropdown-link" style="color: #e6e9f5; font-size: 14px;">
            {{topic}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="0">反國安法大遊行：不屈的香港人</el-dropdown-item>
            <el-dropdown-item command="1">香港已不能在自由市场竞争</el-dropdown-item>
            <el-dropdown-item command="2">中国香港国安法立法无可非议</el-dropdown-item>
            <el-dropdown-item command="3">我们没有放弃为香港争取民主</el-dropdown-item>
            <el-dropdown-item command="4">美國有意終止與香港的引渡協議</el-dropdown-item>
            <el-dropdown-item command="5">香港各界：国安法守护香港</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button class="yiti" @click="goTopics">yi题设置</el-button>
      </div>
      <div class="item-echarts item-height-500" slot="echarts">
        <themeRiverVue :rawData="rawData" :rawLegend="rawLegend" :xLabel="rawXLabel" :topicTxt="topicTxt" :isShow="false" />
      </div>
    </chartWrap>
    <div class="ctx-flex-item mt">
      <chartWrap wrapClass="flex-item-left" title="受众分布" iconClass="el-icon-pie-chart">
        <div class="item-title-right" slot="titleRight">
          <el-button-group>
            <el-button :class="audienceIndex === 0 ? 'btn-default btn-active' : 'btn-default'" @click="() => handleAudience(0)">趋势</el-button>
            <el-button :class="audienceIndex === 1 ? 'btn-default btn-active' : 'btn-default'" @click="() => handleAudience(1)">当前</el-button>
          </el-button-group>
        </div>
        <div class="item-echarts-audience item-height-340" :class="audienceIndex === 1 ? 'item-right-active' : ''" slot="echarts">
          <!-- <div class="item-echarts-left item-height-340" id="audience"></div> -->
          <lineComp wrapClass="item-echarts-left" id="audience" :label="audienceLabel" :legend="audienceLegend" :data="audienceData" @clickLegend="handleClickLegend" />
          <!-- <div class="item-echarts-right item-height-340" id="audience2"></div> -->
          <pieComp id="pieAudience" wrapClass="item-echarts-right" title="受众分布" :data="audiencePieData" @clickLegend="handleClickLegend" />
        </div>
      </chartWrap>

      <chartWrap wrapClass="flex-item-center" title="力量对比" iconClass="el-icon-s-operation">
        <div class="item-title-right" slot="titleRight">
          <span class="iconfont iconiconset0441" @click="handlePower" style="cursor: pointer;" />
        </div>
        <div class="item-echarts item-height-360" slot="echarts">
          <vbar wrapClass="flex-item-echarts-common" :class="powerIndex === 0 ? 'flex-item-echarts-active' : ''" id="power" :legend="this.powerLegend" :dimensions="this.powerDimensions" :source="this.powerSource" @clickBar="handleBarClick" />
          <div class="flex-item-echarts-common echarts-flex" :class="powerIndex === 1 ? 'flex-item-echarts-active' : ''">
            <div class="echarts-flex-header">
              <div class="echarts-flex-header-item"></div>
              <div class="echarts-flex-header-item">建制</div>
              <div class="echarts-flex-header-item">反对</div>
              <div class="echarts-flex-header-item">不确定</div>
            </div>
            <div class="echarts-flex-body">
              <div class="echarts-flex-body-item">官方媒体</div>
              <div class="echarts-flex-body-item">
                <smallPie id="offical1" name="建制派" :percent="30" tipName="影响力" :legend="smLegend" :xValue="[78, 45, 45]" />
              </div>
              <div class="echarts-flex-body-item">
                <smallPie id="offical2" name="反对派" :percent="30" tipName="影响力" :legend="smLegend" :xValue="[78, 45, 45]" :colorIndex="1" />
              </div>
              <div class="echarts-flex-body-item">
                <smallPie id="offical3" name="不确定派" :percent="30" tipName="影响力" :legend="smLegend" :xValue="[78, 45, 45]" :colorIndex="2" />
              </div>
            </div>
            <div class="echarts-flex-body">
              <div class="echarts-flex-body-item">民间媒体</div>
              <div class="echarts-flex-body-item" id="folk1">
                <smallPie id="folk1" name="建制派" :percent="30" tipName="影响力" :legend="folkLegend" :xValue="[78, 45, 45]" />
              </div>
              <div class="echarts-flex-body-item" id="folk2">
                <smallPie id="folk2" name="反对派" :percent="30" tipName="影响力" :legend="folkLegend" :xValue="[78, 45, 45]" :colorIndex="1" />
              </div>
              <div class="echarts-flex-body-item" id="folk3">
                <smallPie id="folk3" name="不确定派" :percent="30" tipName="影响力" :legend="folkLegend" :xValue="[78, 45, 45]" :colorIndex="2" />
              </div>
            </div>
          </div>
        </div>
      </chartWrap>

      <chartWrap wrapClass="flex-item-right" title="平台数据分布" iconClass="el-icon-s-data">
        <div class="item-title-right" slot="titleRight"></div>
        <!-- <div class="item-echarts item-height-360" slot="echarts" id="platform"></div> -->
        <div class="item-echarts item-height-360" slot="echarts">
          <hbar id="platform" :legend="ptLegend" :yLabel="ptYLabel" :yData="yData" />
        </div>
      </chartWrap>

    </div>
  </div>
</div>
</template>

<script>
import mHeader from '@/components/mHeader'
import chartWrap from '@/components/ChartWrap';
import themeRiverVue from '@/components/echarts/themeRiver.vue';
import echartLine from '@/components/echarts/echartLine.vue';
import pie from '@/components/echarts/pie.vue'
import vbar from '@/components/echarts/vbar.vue'
import hbar from '@/components/echarts/hbar.vue'
import smallPie from '@/components/echarts/smallPie.vue'
import {
  getRequest
} from '@/utils/index';
import '../../styles/common/index.scss'
import './topic.scss'
export default {
  name: 'topic',
  components: {
    mHeader,
    chartWrap,
    themeRiverVue,
    lineComp: echartLine,
    pieComp: pie,
    vbar,
    hbar,
    smallPie
  },
  mounted() {
    // console.log('地址栏参数: !!!!', window.location);
    // console.log(getRequest('title'));
    const topic = getRequest('title');
    this.topic = topic;
  },
  data() {
    return {
      topic: '',
      powerIndex: 0,
      topicTxt: [{
        tit:'#反國安法大遊行：不屈的香港人#',
        time:'2020-09-01 16:32'
      }, {
        tit:'#香港已不能在自由市场竞争#',
        time:'2020-09-04 16:32'
      }, {
        tit:'#中国香港国安法立法无可非议#',
        time:'2020-09-09 16:32'
      }, {
        tit:'#我们没有放弃为香港争取民主#',
        time:'2020-09-10 16:32'
      }, {
        tit:'#美國有意終止與香港的引渡協議#',
        time:'2020-09-18 16:32'
      }, {
        tit:'#香港各界：国安法守护香港#',
        time:'2020-09-20 16:32'
      }],
      audienceIndex: 0,
      colors: ['#5673ff', '#ff6666', '#04d1b2', '#ab57ff'],
      rawData: [
        [10, 15, 35, 38, 22, 16, 7, 2, 17, 33, 40, 32, 26, 35, 40, 32, 26, 22, 16, 22, 10],
        [35, 36, 37, 22, 24, 26, 34, 21, 18, 45, 32, 35, 30, 28, 27, 26, 15, 30, 35, 42, 42],
        [21, 25, 27, 23, 24, 21, 35, 39, 40, 36, 33, 43, 40, 34, 28, 26, 37, 41, 46, 47, 41],
        [10, 15, 35, 38, 22, 16, 7, 2, 17, 33, 40, 32, 26, 35, 40, 32, 26, 22, 16, 22, 10, ]
      ],
      rawLegend: ['涉军', '涉政', '社会', '其它'],
      rawXLabel: [
        '2020-09-01 16:32', '2020-09-02 16:32', '2020-09-03 16:32', '2020-09-04 16:32', '2020-09-05 16:32', '2020-09-06 16:32', '2020-09-07 16:32', '2020-09-08 16:32', '2020-09-09 16:32', '2020-09-10 16:32', '2020-09-11 16:32', '2020-09-12 16:32', '2020-09-13 16:32', '2020-09-14 16:32', '2020-09-15 16:32', '2020-09-16 16:32', '2020-09-17 16:32', '2020-09-18 16:32', '2020-09-19 16:32', '2020-09-20 16:32', '2020-09-21 16:32'
      ],
      startDate: '',
      endDate: '',
      // audienceType: 'line', // line || pie
      audienceData: [{
          name: '建制',
          type: 'line',
          stack: '总量',
          data: [120, 132, 101, 134, 90, 230, 210],
          smooth: true,
          clip: true,
        },
        {
          name: '反对',
          type: 'line',
          stack: '总量',
          data: [220, 182, 191, 234, 290, 330, 310],
          smooth: true,
          clip: true,
        },
        {
          name: '不确定',
          type: 'line',
          stack: '总量',
          data: [150, 232, 201, 154, 190, 330, 410],
          smooth: true,
          clip: true,
        }
      ],
      audienceLabel: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      audienceLegend: ['建制', '反对', '不确定'],
      audiencePieData: [{
          value: 335,
          name: '建制'
        },
        {
          value: 310,
          name: '反对'
        },
        {
          value: 234,
          name: '不明确'
        }
      ],
      powerLegend: ['建制', '反对', '不确定'],
      powerDimensions: ['powername', '建制', '反对', '不确定'],
      powerSource: [{
          powername: '总体',
          '建制': 43.3,
          '反对': 85.8,
          '不确定': 93.7
        },
        {
          powername: '官方媒体',
          '建制': 83.1,
          '反对': 73.4,
          '不确定': 55.1
        },
        {
          powername: '民间媒体',
          '建制': 86.4,
          '反对': 65.2,
          '不确定': 82.5
        },
        {
          powername: '自媒体',
          '建制': 72.4,
          '反对': 53.9,
          '不确定': 39.1
        }
      ],
      ptLegend: ['建制', '反对', '不确定'],
      ptYLabel: ['Twitter', '新闻2', 'Facebook', '新闻1', '论坛2'],
      yData: [{
          name: '建制',
          value: [320, 302, 301, 334, 390]
        },
        {
          name: '反对',
          value: [120, 132, 101, 134, 90]
        },
        {
          name: '不确定',
          value: [220, 182, 191, 234, 290]
        },
      ],
      smLegend: ['官方媒体-', '官方媒体二', '官方媒体三'],
      folkLegend: ['民间媒体-', '民间媒体二', '民间媒体三'],
    }
  },
  methods: {
    handleResize(myChart) {
      window.onresize = function () {
        myChart.resize();
      }
    },
    handlePower() {
      this.powerIndex = this.powerIndex === 0 ? 1 : 0;
    },
    handleAudience(val) {
      this.audienceIndex = val;
    },
    handleDateChange() {},
    handleClickLegend() {
      // console.log('当前点击的legend:', name);
    },
    handleBarClick() {
      // console.log('点击了 bar 值:', name);
    },

    handleDropdownClick(command) {
      this.topic = this.topicTxt[command]
    },
    goTopics(){
      console.log(this.topic)
      window.location.href = `/topics.html?title=${this.topic}`
    }
  },
}
</script>
